<style>
    div {
        background-color: gray;
        display: inline-block;
        margin: 30px;
        width: 100px;
        height: 100px;
        border-radius: 50px;
    }

    .green.light {
        background-color: green;
    }

    .yellow.light {
        background-color: yellow;
    }

    .red.light {
        background-color: red;
    }
</style>

<div class="green"></div>
<div class="yellow"></div>
<div class="red"></div>

<script>
    function green() {
        var lights = document.getElementsByTagName("div");
        for (var i = 0; i < 3; i++) {
            lights[i].classList.remove("light")
        }
        document.getElementsByClassName("green")[0].classList.add('light')
    }
    function yellow() {
        var lights = document.getElementsByTagName("div");
        for (var i = 0; i < 3; i++) {
            lights[i].classList.remove("light")
        }
        document.getElementsByClassName("yellow")[0].classList.add('light')
    }
    function red() {
        var lights = document.getElementsByTagName("div");
        for (var i = 0; i < 3; i++) {
            lights[i].classList.remove("light")
        }
        document.getElementsByClassName("red")[0].classList.add('light')
    }
    function sleep(t) {
        return new Promise(function (resolve, reject) {
            setTimeout(resolve, t);
        });
    }
    function go() {
        green()
        sleep(1000).then(function () {
            yellow()
            return sleep(200);
        }).then(function () {
            red()
            return sleep(500);
        }).then(go)
    }
    go();
</script>